<template>
  <div class="index">
    <el-container>
      <el-header style="height: 270px" class="selectCate">
        <div class="category">
          <div>
            <div>
              <div class="cate">作者:</div>
              <div class="cateText">
                <div
                  v-for="(item, index) in author"
                  :key="index"
                  @click="demo(item.author)"
                >
                  {{ item.author }}
                </div>
              </div>
            </div>
            <div>
              <div class="cate">出版社:</div>
              <div class="cateText">
                <div
                  v-for="(item, index) in author"
                  :key="index"
                  @click="demo1(item.press)"
                >
                  {{ item.press }}
                </div>
              </div>
            </div>
            <div style="font-size: 15px">
              <span>搜索条件:</span>
              <span
                ><a @click.prevent="dianji()" href="#"> {{ this.v1 }} </a></span
              >
              <a @click.prevent="dianji()" href="#"> {{ this.v2 }} </a>
            </div>
          </div>
        </div>
      </el-header>
      <div>
        <el-row :gutter="30" :data="pageInfo.records">
          <el-col
            :span="6"
            v-for="(item, index) in pageInfo"
            :key="index"
            style="padding-bottom: 100px"
          >
            <div class="grid-content bg-purple">
              <template>
                <el-card>
                  <img
                    :src="item.bookPic"
                    class="image"
                    style="width: 200px; height: 200px"
                  />
                  <div class="book">
                    <h3 prop="bookName" class="bookName">
                      {{ item.bookName }}
                    </h3>
                    <span class="author">{{ item.author }}</span
                    ><br />
                    <span>{{ item.press }}</span>
                    <div class="bottom card-header">
                      <span
                        style="margin-right: 100px; color: red; font-size: 18px"
                        >￥{{ item.price }}</span
                      >
                      <el-button type="text" class="button"
                        >加入购物车</el-button
                      >
                    </div>
                  </div>
                </el-card>
              </template>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageInfo: {},
      pageNum: 1,
      author: {},
      press: {},
      v1: null,
      v2: null,
      book: {
        bookName: "",
        category: 0,
      },
    };
  },
  created() {
    // this.book.bookName = this.$route.query.bookName;
    this.book.category = this.$route.query.cateId;
    console.log(this.book.category);
    // console.log(this.book.bookName);
  },
  methods: {
    dianji() {
      this.v1 = null;
      this.v2 = null;
      this.bookName = null;
      this.findBook();
      this.showList();
    },
    goto(pageNum) {
      this.pageNum = pageNum;
      this.findBooks();
    },
    findBook() {
      let formDate = new FormData();
      formDate.set("pageNum",this.pageNum)
      formDate.set("book",this.book)
      this.axios
        .post(
          "http://localhost:8081/book/listBook",formDate)
        .then((res) => {
          console.log(res.data.object);
          this.pageInfo = res.data.object.records;
          console.log(this.$route.query.cateId);
        })
        .catch();
    },
    showList() {
      this.axios.get("http://localhost:8081/cate/showCate").then((res) => {
        console.log(res.data.object);
        this.author = res.data.object;
      });
    },
    demo(val) {
      this.v1 = val;
      this.axios
        .post("http://localhost:8081/book/listBook/?author=" + val)
        .then((res) => {
          this.pageInfo = res.data.object.records;
        });
      this.axios
        .post("http://localhost:8081/cate/showCateFind?author=" + val)
        .then((res) => {
          console.log(res.data.object);
          this.author = res.data.object;
          console.log(val);
        });
    },
    demo1(val) {
      this.v2 = val;
      this.axios
        .post("http://localhost:8081/book/listBook/?press=" + val)
        .then((res) => {
          this.pageInfo = res.data.object.records;
        });
      this.axios
        .post("http://localhost:8081/cate/showCateFind?press=" + val)
        .then((res) => {
          console.log(res.data.object);
          this.author = res.data.object;
          console.log(val);
        });
    },
  },
  mounted() {
    console.log("接口方法");
    this.findBook();
    this.showList();
  },
};
</script>
<style  scoped>
.demo {
  overflow: auto !important;
}

.index {
  width: 1248px;
  margin: auto;
}

.img {
  height: 200px;
}

.selectCate {
  margin-top: 20px;
  margin-bottom: 30px;
}

.category {
  height: 250px;
  border-bottom: solid 1px;
  /* // background-color: paleturquoise; */
}

.category > div {
  height: 70px;
}

.category > div > div > div {
  height: 70px;
  border-bottom: solid 1px;
}

.cate {
  width: 100px;
  border-right: solid 1px;
  float: left;
}

.cateText {
  float: left;
  width: 1106px;
  border-bottom: solid 1px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.cateText > div {
  width: 20%;
  height: 50%;
  text-align: center;
}

.cateText > div:hover {
  cursor: pointer;
  color: red;
}

.bookName {
  height: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book > h3 {
  margin-bottom: 10px;
}

.book > span {
  color: #999;
  font-size: 12px;
}

.el-row {
  margin-bottom: 20px;
  width: 1248px;
}

.el-row > last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
  height: 300px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
